<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <context-param>  
            <param-name>primefaces.THEME</param-name>  
            <param-value>redmond</param-value>  
        </context-param>
        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces - ShowCase</title>
<h:outputStylesheet name="css/jsfcrud.css"/>
            </f:facet>

            <style type="text/css">
                .ui-layout {
                    width: 800px;                    
                }
                .ui-layout-north {
                    background-color: #141414;
                }

                .ui-layout-north .ui-layout-unit-content {
                    background-color: #141414;
                    text-align: right;
                    color: whitesmoke;
                }

            </style>
        </h:head>


        <h:body>
            <p:layout fullPage="true">
                <h:form id="loginForm">
                    <p:overlayPanel id="loginPanel" for="loginButton" hideEffect="fade">
                        <h:form id="userForm"> 
                            <h:panelGrid columns="2" >
                                <h:outputLabel value="User" for="userName"/>
                                <p:inputText id="userName" value=""/>
                                <h:outputLabel value="Password" for="password"/>
                                <p:password id="password" value="" />
                                <p:commandButton value="Login"/>
                            </h:panelGrid>
                        </h:form>
                    </p:overlayPanel>
                    <p:layoutUnit id="top" position="north" size="45"><h:panelGrid columns="4" style="float: right">

                            <h:outputLabel value="Welcome"/>
                            <h:outputLabel value="Tomas"/>
                            <p:commandLink id="loginButton" value="Logout" style="color: whitesmoke"/>

                        </h:panelGrid>
                    </p:layoutUnit>
                </h:form>
                <p:layoutUnit id="left" position="west" size="200" header="Manage account">
                    <h:form id="userMenu">
                        <h:panelGrid rendered="true" columns="1">
                            <h:commandLink value="My files"/>
                            <h:commandLink value="Shared files"/>
                            <h:commandLink value="Logs"/>
                            <h:commandLink value="Sharing"/>
                        </h:panelGrid>
                    </h:form>
                </p:layoutUnit>
                <p:layoutUnit id="center" position="center">
                    <p:panel style="width: 800px">
                        <h:form id="mainForm">

                            <p:growl id="messages"/>  

                            <p:menubar>
                                <p:menuitem value="Up" icon="ui-icon-circle-arrow-n" />
                                <p:submenu label="File" icon="ui-icon-document">  
                                    <p:menuitem value="New" icon="ui-icon-contact"/> 
                                    <p:menuitem value="Open" url="#" />  

                                </p:submenu>
                                <p:submenu label="Folder" icon="ui-icon-folder-collapsed">  
                                    <p:menuitem value="New" icon="ui-icon-folder-collapsed"/> 
                                    <p:menuitem value="Open" icon="ui-icon-folder-open" url="#" />  

                                </p:submenu> 

                                <p:menuitem value="Delete" icon="ui-icon-trash"/>
                                <p:menuitem value="Download" icon="ui-icon-disk" style="float: right" disabled="true"/>
                            </p:menubar> 

                            <p:dataTable id="Files" >  


                                <p:column headerText="Name">  
                                </p:column>  

                                <p:column headerText="Type">  
                                </p:column>  

                                <p:column headerText="Last change" >
                                </p:column>  

                                <p:column headerText="Size">  
                                </p:column>  

                                <f:facet name="footer">  

                                </f:facet>  

                            </p:dataTable>

                        </h:form>
                    </p:panel>
                </p:layoutUnit>

            </p:layout>

                        <h:form>
                    <h:commandLink action="/generated/file/List" value="Show All File Items"/>
                </h:form>
                <h:form>
                    <h:commandLink action="/generated/folder/List" value="Show All Folder Items"/>
                </h:form>
                <h:form>
                    <h:commandLink action="/generated/user/List" value="Show All User Items"/>
                </h:form>
</h:body>




    </f:view>
</html>
